<template>
  <div class="navbar">
    <!-- 折叠按钮 -->
    <div
      class="hamburger-container"
      @click="toggleSidebar"
    >
      <el-icon :class="{ 'is-active': !isCollapse }">
        <Fold v-if="!isCollapse" />
        <Expand v-else />
      </el-icon>
    </div>

    <div class="right-menu">
      <el-dropdown
        class="avatar-container"
        trigger="hover"
      >
        <div class="avatar-wrapper">
          <span class="user-name">
            {{ userStore.getUserNickname ? userStore.getUserNickname : '未命名用户' }}
          </span>
          <el-icon class="el-icon-arrow"><CaretBottom /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleLogout">
              <el-icon><SwitchButton /></el-icon>
              <span>退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from 'vue'
import { CaretBottom, SwitchButton, Fold, Expand } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import { ElMessage, ElMessageBox, ElMessageBoxOptions } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()
const isCollapse = ref(false)

const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value
}

const handleLogout = () => {
  const options: ElMessageBoxOptions = {
    message: '确认退出登录吗？',
    title: '提示',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }

  ElMessageBox.confirm(options.message, options.title, options)
    .then(async () => {
      await userStore.logout()
      ElMessage.success('退出成功')
      await router.push('/login')
    })
    .catch(() => {})
}

defineExpose({
  isCollapse
})

const activeIndex = ref('1')
const props = defineProps<{
  isCollapse: boolean
}>()

const handleResize = () => {
  isCollapse.value = window.innerWidth < 768
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
  handleResize() // 初始化时检查窗口大小
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style lang="scss" scoped>
.navbar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .hamburger-container {
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s;
    padding: 0 15px;
    margin-left: -20px;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }

    .el-icon {
      font-size: 20px;
      color: #303133;
      transition: transform 0.3s;

      &.is-active {
        transform: rotate(180deg);
      }
    }
  }

  .right-menu {
    display: flex;
    align-items: center;

    .avatar-container {
      cursor: pointer;

      .avatar-wrapper {
        display: flex;
        align-items: center;

        .user-name {
          font-size: 16px;
          color: #303133;
          margin-right: 8px;
          font-weight: 500;
        }

        .el-icon-arrow {
          font-size: 12px;
          color: #909399;
        }
      }

      &:hover {
        border: none;

        .user-name {
          color: #409eff;
        }

        .el-icon-arrow {
          color: #409eff;
        }
      }
    }
  }
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  padding: 8px 16px;

  .el-icon {
    margin-right: 8px;
  }
}
</style>
